import 'package:flutter/material.dart';

import 'package:scrawl/third_part/bloc/bloc.dart';

import '../bloc/edit_scrawl_bloc.dart';
import '../model/scrawl_data.dart';
import 'slider/scrawl_size_slider.dart';

final double kBottomHeight = 160;
final double kBottomTabBarHeight = 48;
final double kBottomTabViewHeight = kBottomHeight - kBottomTabBarHeight;

class ScrawlPanelWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocBuilder(
      bloc: BlocProvider.of<EditScrawlBloc>(context),
      builder: (context, state) {
        if (state is ScrawlListUpdate) {
          // ignore: close_sinks
          EditScrawlBloc bloc = BlocProvider.of<EditScrawlBloc>(context);
          List<ScrawlFile> scrawlList = bloc.scrawlList;
          int selectedIndex = bloc.selectedIndex;
          int selectedSize = bloc.selectedSize;
          bool canUndo = bloc.drawController.canUndo;
          bool canRedo = bloc.drawController.canRedo;
          // TODO: 转为事件
          final undo = () => bloc.drawController.undo();
          final redo = () => bloc.drawController.redo();
          final userErase = () => bloc.drawController.useEraser = true;

          if (scrawlList != null) {
            return Container(
              color: Color(0xFFFFFFFF),
              height: kBottomHeight,
              child: Column(
                mainAxisSize: MainAxisSize.max,
                children: <Widget>[
                  Row(
                    children: <Widget>[
                      GestureDetector(
                        onTap: () {
                          userErase();
                        },
                        child: Padding(
                          padding: EdgeInsets.only(
                            top: 13,
                            bottom: 17,
                            left: 20,
                          ),
                          child: Text('橡皮'),
                        ),
                      ),
                      GestureDetector(
                        onTap: () {
                          debugPrint('撤销');
                          undo();
                        },
                        child: Padding(
                          padding: EdgeInsets.only(
                            top: 13,
                            bottom: 17,
                            left: 20,
                          ),
                          child: Text('撤销'),
                        ),
                      ),
                      Spacer(),
                      _buildSlider(context, selectedSize),
                      Spacer(),
                      GestureDetector(
                        onTap: () {
                          debugPrint('重做');
                          redo();
                        },
                        child: Padding(
                          padding: EdgeInsets.only(
                            top: 13,
                            bottom: 17,
                            right: 20,
                          ),
                          child: Text('重做'),
                        ),
                      ),
                    ],
                  ),
                  // 列表
                  Row(
                    children: <Widget>[
                      Padding(
                        padding: EdgeInsets.only(left: 20, right: 16),
                        child: GestureDetector(
                          onTap: () {
                            BlocProvider.of<EditScrawlBloc>(context)
                                .add(ClearScrawl());
                          },
                          child: Text('清空'),
                        ),
                      ),
                      Expanded(
                        child: ScrawlListWidget(
                          scrawlList,
                          selectedIndex,
                        ),
                      ),
                    ],
                  ),
                  Spacer(),
                  // 底部栏
                  SizedBox(
                    height: 48,
                    child: Row(
                      mainAxisSize: MainAxisSize.max,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: <Widget>[
                        GestureDetector(
                          behavior: HitTestBehavior.translucent,
                          onTap: () {
                            BlocProvider.of<EditScrawlBloc>(context)
                                .add(CloseScrawl());
                          },
                          child: Padding(
                            padding: EdgeInsets.symmetric(
                              horizontal: 20,
                              vertical: 8,
                            ),
                            child: Text('取消'),
                          ),
                        ),
                        Spacer(),
                        Text(
                          '画笔',
                          style: TextStyle(
                            color: Color(0xFF586D8C),
                            fontSize: 14,
                            fontWeight: FontWeight.w500,
                          ),
                        ),
                        Spacer(),
                        GestureDetector(
                          behavior: HitTestBehavior.translucent,
                          onTap: () {
                            BlocProvider.of<EditScrawlBloc>(context)
                                .add(CloseScrawl());
                          },
                          child: Padding(
                            padding: EdgeInsets.symmetric(
                              horizontal: 20,
                              vertical: 8,
                            ),
                            child: Text('完成'),
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            );
          }
        }
        return Container();
      },
    );
  }

  Widget _buildSlider(BuildContext context, int selectWidth) {
    // ignore: close_sinks
    EditScrawlBloc bloc = BlocProvider.of<EditScrawlBloc>(context);
    return Container(
      width: 188,
      height: 54,
      child: ScrawlSizeSlider(
        value: bloc.selectedSize,
        onChanged: (value) {
          bloc.add(ChangeScrawlSize(value));
        },
      ),
    );
  }
}

class ScrawlListWidget extends StatelessWidget {
  final List<ScrawlFile> scrawlList;
  final int selectPosition;
  final double height = 46;

  ScrawlListWidget(this.scrawlList, this.selectPosition)
      : assert(scrawlList != null);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: height,
      child: OverflowBox(
        alignment: Alignment.center,
        maxHeight: height + 4,
        child: ListView.separated(
          padding: EdgeInsets.only(right: 16, left: 2),
          scrollDirection: Axis.horizontal,
          itemCount: scrawlList.length,
          itemBuilder: (context, index) {
            ScrawlFile scrawlFile = scrawlList[index];

            return ScrawItemWidget(
              index: index,
              scrawlFile: scrawlFile,
              height: height,
              isSelect: selectPosition == index,
            );
          },
          separatorBuilder: (BuildContext context, int index) =>
              SizedBox(width: 10),
        ),
      ),
    );
  }
}

class ScrawItemWidget extends StatelessWidget {
  const ScrawItemWidget({
    Key key,
    @required this.scrawlFile,
    @required this.height,
    this.index,
    this.isSelect,
  }) : super(key: key);

  final ScrawlFile scrawlFile;
  final double height;
  final int index;
  final bool isSelect;
  final double width = 110;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        BlocProvider.of<EditScrawlBloc>(context).add(ChangeScrawl(index));
      },
      child: Center(
        child: Container(
          //margin: EdgeInsets.only(left: index != 0 ? 5 : 0),
          height: height,
          width: width,
          child: _buildContentStack(),
        ),
      ),
    );
  }

  Stack _buildContentStack() {
    final double radius = 8;
    final double inBorderWidth = 2;
    final double outBorderWidth = 2;
    final double outRadius = radius + outBorderWidth;
    final Color inBorderColor = Color(0xFFFFFFFF);
    final Color outBorderColor = Color(0xFFFF91C4);
    final bool isUnlock = !scrawlFile.isLock;
    final Widget thumbWidget = Image.asset(
      'assets/scrawl/${scrawlFile.thumb}',
      width: width,
      height: height,
      fit: BoxFit.cover,
    );

    List<Widget> children = [];
    if (isSelect) {
      children = [
        Positioned(
          top: -outBorderWidth,
          right: -outBorderWidth,
          bottom: -outBorderWidth,
          left: -outBorderWidth,
          child: DecoratedBox(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(outRadius),
              // border: Border.all(
              //   color: outBorderColor,
              //   width: outBorderWidth,
              // ),
              color: outBorderColor,
            ),
          ),
        ),
        Positioned.fill(
          child: ClipRRect(
            borderRadius: BorderRadius.circular(radius),
            child: Container(
              foregroundDecoration: BoxDecoration(
                borderRadius: BorderRadius.circular(radius),
                border: Border.all(
                  color: inBorderColor,
                  width: inBorderWidth,
                ),
              ),
              child: thumbWidget,
            ),
          ),
        ),
      ];
    } else {
      children = [
        Positioned.fill(
          child: ClipRRect(
            borderRadius: BorderRadius.circular(radius),
            child: thumbWidget,
          ),
        ),
      ];
    }

    return Stack(
      overflow: Overflow.visible,
      children: children,
    );
  }
}
